<head th:include="certificateWeb/headFoot :: headerCss"></head>
<link href="/css/certificateWeb/login.css" rel="stylesheet">
<div th:include="certificateWeb/headFoot :: header"></div>
<body class="signin">
<div class="signinpanel">
	<div class="row">
		<div class="login_panel">
            <form id="signupForm">
				<h3 style="text-align: center;">用户注册</h3>
                <div class="box_1 pos">
                    <label class="label">&nbsp;用户名：</label>&nbsp;&nbsp;
                    <label class="label"><input style="color: #555555 ;" type="text" name="name" id="name" class="form-control reg_web" placeholder="用户名"/></label>
                </div>
                <div class="box_1 pos">
                    <label class="label">&nbsp;密&nbsp;&nbsp;&nbsp;&nbsp;码：</label>&nbsp;&nbsp;
                    <label class="label"><input style="color: #555555 ;" type="password" name="password" id="password" class="form-control reg_web" placeholder="密码"/></label>
                </div>
                <div class="box_1 pos">
                    <label class="label">&nbsp;手机号：</label>&nbsp;&nbsp;
                    <label class="label"><input style="color: #555555 ;" type="text" name="mobile" id="mobile" class="form-control reg_web" placeholder="手机号"/></label>&nbsp;&nbsp;&nbsp;&nbsp;
                </div>
                <div class="box_1 pos">
                    <label class="label">&nbsp;验证码：</label>&nbsp;&nbsp;
                    <label class="flex label" style="width: 205px">
						<input type="text" name="code" id="code" class="form-control" style="flex: 1; color: #555555 ;" placeholder="验证码"/>
						<input type="button" class="form-control" style="flex: 1;color: #555555 ;" onclick="send(this)" value="获取验证码" />
					</label>
                </div>
				<div class="box_1" style="margin-top:20px;padding-left:40px">
					<label >&nbsp;<input id="radio" type="checkbox"></label>&nbsp;&nbsp;
					<label th:each="xz:${consultations}">我已同意<a target="_blank" style="color: blue" th:href="@{'/certificate/policyDetail?id='+${xz.id}}" th:text="${xz.title}"></a></label>
				</div>
                <div style="text-align: center">
                    <button class="btn btn-login" type="submit" style="margin: 10px auto" id="reg">注册</button>
                </div>
            </form>
		</div>
	</div>
</div>
<div th:include="certificateWeb/headFoot :: footer"></div>
<script src="/js/plugins/layer/layer.min.js" th:src="@{/js/plugins/layer/layer.min.js}"></script>
<script src="/js/plugins/validate/jquery.validate.extend.js"></script>
<script type="text/javascript">
    //回车登录
    document.onkeydown =cdk;
    function cdk(){
        if(event.keyCode ==13){
            login();
        }
    }
    $(function () {
        validateRule();
    });
    $.validator.setDefaults({
        submitHandler: function () {
            login();
        }
    });
    function login() {
		if(!$('#radio').prop("checked")){
            layer.msg("请勾选已阅读注册须知");
            return false
        }
        $.ajax({
            type: "POST",
            url: '/certificate/sendRegister',
            data: $('#signupForm').serialize(),
            success: function (r) {
                // console.log("r",r);
                if (r.code == 50012){
                    layer.msg("该手机号已注册");
                }else if (r.code == 50015){
                    layer.msg("验证码错误");
                }else if(r.code == 50017){
                    layer.msg("用户名已存在");
                } else {
                    location.href = "/certificate/loginWeb";
                }
            },
        });
    }
		function checkMobile(sMobile) {
			if (!(/^1[3|4|5|6|7|8|9][0-9]\d{8}$/.test(sMobile))) {
				layer.msg('手机号码填写错误，请填写正确的手机格式');
				document.mobileform.mobile.focus();
				return false;
			}
			return true;
		}

		var countdown = 60;
		function settime(val) {
			if (countdown == 0) {
				val.removeAttribute("disabled");
				val.value = "获取验证码";
				countdown = 60;
			} else {
				val.setAttribute("disabled", true);
				val.value = "重新发送(" + countdown + ")";
				countdown--;
				var myVar = setTimeout(function () {
					settime(val)
				}, 1000)
			}
		}
		//发送验证码
		function send(val) {
			var name = $("#mobile").val();
			if (name.length != 0) {
				jQuery.ajax({
					url: '/certificate/sendRegCode',
					type: 'POST',
					data: {mobile: name},
					success: function (data) {
						checkMobile(name);
						if (data == 1) {
							val.removeAttribute("disabled");
							val.value = "获取验证码";
							countdown = 60;
							layer.msg("此手机号码已注册")
						} else {
                            layer.msg("发送成功");
							val.setAttribute("disabled", true);
							val.value = "重新发送(" + countdown + ")";
							countdown--;
							setTimeout(function () {
								settime(val)
							}, 1000)
						}
					}
				})
			} else {
				layer.msg('请输入手机号！');
			}
		}

	function validateRule() {
		var icon = "<i class='fa fa-times-circle'></i>";
		$("#signupForm").validate({
			rules: {
                name: {
					required: true
				},
				password: {
					required: true,
                    checkPassword1:true,
                    minlength:8,
                    maxlength:15
				},
                mobile: {
                    required: true,
                    isPhone:true
                },
                code: {
                    required: true
                }
			},
			messages: {
                name: {
					required: icon + "请输入用户名"
				},
				password: {
					required: icon + "请输入密码",
                    minlength:'密码最少8位',
                    maxlength:'密码最长15位'
				},
                mobile: {
                    required: icon + "请输入手机号"
                },
                code: {
                    required: icon + "请输入验证码"
                }
			}
		})
	}
</script>
</body>





